AWS SDK for Node.js を使ってフィードバックフォームからメール送信する

AWS SDK for Node.js を使ってフィードバックフォームからメール送信する

Clock Icon2013.03.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

AWS SDK for Node.js を使って、Amazon SES からメール送信してみます。

単純に Node.js からメール送信するだけなのもなんなんで、Twitter Bootstrap を使って以下のようなフィードバックフォームを作りました。

AWS SES Example

このフォームから、Node.js に Post して Amazon SES 経由でメール送信するロジックを作ってみます。

Amazon SES の設定

Amazon SES は、Amazon Simple Email Service の略で、AWS のメール送信サービスです。
production 環境ではない場合は、メールアドレスを事前に登録する必要があります。
Management Console を使って、SES の画面を開き、Verify a New Email Address から 送信したいメールアドレスを入力して、Verify This Email Address をクリックします。

1

メールアドレスを入力し、Verify This Email Address をクリックします。

2-1

メールが届くので、リンクをクリックして認証させます。

IAMアカウントの作成

次に、Create User for SMTP から、メール送信のポリシーに紐づいた IAMアカウント を作成します。

ses1

IAM ユーザの名前を入力して登録します。

ses2

Username と Password が表示されるので、メモもしくは、CSVファイルをDownloadしておきます。

3

メールを送るポリシーは2種類あります。

  • SendRawEmail(自由フォーマット)
    • From、To、Subject、BodyをAPIで指定
  • SendEmail(定型フォーマット)
    • ヘッダ、MIME Type、BodyをAPIで指定

上記の手順で、IAMアカウントを作成した場合、SendRawEmailポリシー しかアタッチされていません。
今回は、SendEmail ポリシーを使って、メール送信を行うので、SendEmailポリシー もアタッチしましょう。

Permissions の Attach User Policy をクリックします。

4

Policy Generator を選択。

5

SendEmailを追加します。

6

AWS SDK for Node.js を使う

さてここからが Node.js です。。AWS SDK で Amazon SES 経由でメール送信するロジックを記述します。

先ずは、express でスケルトンを作成。

$ express aws-ses-sample

package.json で aws-sdk を使うように指定します。(※テンプレートエンジンは、ejs を使っています)

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node-dev app"
  },
  "dependencies": {
    "express": "3.0.3",
    "ejs": "*",
    "aws-sdk": "*"
  }
}

npm install でモジュールをインストール。

$ npm install
aws-sdk@0.9.7-pre.8 node_modules/aws-sdk
├── xmlbuilder@0.4.2
└── xml2js@0.2.4 (sax@0.5.2)

Node.js のコードはこんな感じ。

/*
 * POST feedback.
 */
exports.index = function(req, res, next) {
  
  var AWS = require('aws-sdk');
  AWS.config.loadFromPath('./config/credentials.json');

  var text = req.body.text;
  var ses = new AWS.SES({sslEnabled: true});
  var params = {
    Source: 'xxx@xxx',
    Destination: {
      ToAddresses: ['xxx@xxx'],
    },
    Message: {
      Subject: {
        Data: '【Feedback】'
      },
      Body: {
        Text: {
          Data: text
        }
      }
    }
  };
  
  ses.client.sendEmail(params, function (err, data) {
    if (err) {
      next(err);
    } else {
      res.send();
    }
  });

}

上記で指定しているcredentials.jsonは以下の通り

{ "accessKeyId": "XXXXXXXXXX", "secretAccessKey": "XXXXXXXXXX", "region": "us-east-1" }

accessKeyId と secretAccessKey は、上記のIAMアカウントを作成した時の SMTP Security Credential を指定します。
SES は、us-east-1 リージョンにホストされているため、リージョンは us-east-1 を指定します。

クライアント側の実装

HTMLはこんな感じです。

<!DOCTYPE html lang="ja">
<html>
  
  <head>
    <title>AWS SES Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>

  <body>
    <div class="container" style="padding-top: 24px;">
      <a href="#feedbackModal" class="btn btn-primary" data-toggle="modal">Launch Feedback</a>
    </div>

    <div id="feedbackModal" class="modal hide fade">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Send us feedback</h3>
      </div>
      <div class="modal-body">
        <textarea id="feedback" class="span7" rows="8" placeholder="ご意見・ご感想をご記入ください"></textarea>
      </div>
      <div class="modal-footer">
        <a id="send" href="#" class="btn btn-primary">Send feedback</a>
      </div>
    </div>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="javascripts/bootstrap.min.js"></script>
    <script src="javascripts/feedback.js"></script>
  </body>

</html>

フロントの javascript にて、Send feedback ボタンクリック時に、入力されたメッセージを Node.js に Post します。

$(function(){
  $('#send').click(function(){
    $.ajax({
      type: 'post',
      url: 'feedback',
      data: {
        text: $('#feedback').val()
      },
      success: function() {
        alert('success');
      }
    });
  });
});

メール送信してみる

フォームに入力して、Send feedback ボタンをクリックします。

send

無事メールが届きました。

feedback

今回のソースコードは、GitHub にアップしています。よろしければどーぞ。

参考URL

http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/SES/Client.html

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.